<template>
  <template v-for="(item, index) in menuList" :key="index">
    <!-- 没有子路由 -->
    <template v-if="!item.children">
      <el-menu-item :index="item.path" v-if="item.meta.hidden">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <!-- 只有一个子路由 -->
    <template v-if="item.children && item.children.length == 1">
      <el-menu-item
        :index="item.children[0].path"
        v-if="item.children[0].meta.hidden"
      >
        <el-icon>
          <component :is="item.children[0].meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <!-- 有多个子路由 -->
    <template v-if="item.children && item.children.length > 1">
      <el-sub-menu
        :index="item.path"
        v-if="checkPermission(item.children[0].meta.permission)"
      >
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <Menu :menuList="item.children"></Menu>
      </el-sub-menu>
    </template>
  </template>
  <!-- {{ menuList }} -->
</template>

<script setup>
import permissionCheck from "@/utils/permissionCheck";

defineProps(["menuList"]);

const checkPermission = (permissionS) => {
  const permissionStatus = permissionCheck(permissionS);
  return permissionStatus
};
</script>
<script>
export default {
  name: "Menu",
};
</script>
<style scoped>
</style>